<template>
	<uni-popup ref="welfare" v-show='show' :mask-click="false" type='bottom'>
		<view class="Welfare">
			<div class="close absolute" @click="handleClose">
				<image src="../../static/purchaseGoods/close.png" style="width: 100%;    display: contents;" alt="" />
			</div>
			<view class="welfareHeader">
				请选择福利权益
			</view>
			<view class="viewBoxWelFare">
				<!-- 福利权益类型1提货券+期权积分 2期权积分 -->
				<view class="viewBox1" @click='welfareType=1'>
					<view class="title1">
						提货券+期权积分
					</view>
					<view class="title2">
						100%提货券+80%期权积分
					</view>

					<view class="selectRadio">

						<image src="@/static/purchaseGoods/selected.png" v-if='welfareType == 1' class='noselectradio'
							mode=""></image>
						<image src="@/static/purchaseGoods/noselect.png" v-else class='noselectradio' mode="">
						</image>
					</view>
				</view>
				<view class="viewBox1" @click='welfareType=2'>
					<view class="title1">
						期权积分
					</view>
					<view class="title2">
						1倍，期权按每日5‰释放、释放后可行权交易或持有增值（持有日增值4‰）
					</view>
					<view class="selectRadio">
						<image src="@/static/purchaseGoods/selected.png" v-if='welfareType == 2' class='noselectradio'
							mode=""></image>
						<image src="@/static/purchaseGoods/noselect.png" v-else class='noselectradio' mode="">
						</image>

					</view>
				</view>
			</view>
			<view class="viewWelFareBtn" @click="handleSelelctWelFare">
				确定
			</view>
		</view>
	</uni-popup>
</template>

<script>
	import {

		setWelfareType,
		personalData
	} from "../../api/api.js"
	export default {
		name: 'welfare',
		props: {
			show: {
				type: Boolean,
				default: false
			}
		},
		data(){
			return {
				welfareType:1
			}
		},
		watch: {
			show(newValue) {
				if (newValue) {
					let that = this
					this.$refs.welfare.open('bottom')
					personalData().then(res=>{
						this.welfareType = res.data.welfareRightsType=='0'?1:res.data.welfareRightsType
					})
				} else {
					this.$refs.welfare.close()
				}
			}
		},
		mounted() {

		},
		methods: {
			handleClose() {
				this.$refs.welfare.close()
				this.$emit('close', false)
			},
			handleSelelctWelFare() {
				setWelfareType({
					type: this.welfareType
				}).then(res => {
					if (res.code == '200') {
						uni.showToast({
							title: '设置成功',
							icon: "none"
						})
						this.handleClose()
					}
				})
			},
		}
	}
</script>

<style scoped lang="less">
.Welfare {
		width: 100vw;
		height: 976rpx;
		background: #F6F6FA;
		border-radius: 24rpx 24rpx 0rpx 0rpx;
		display: flex;
		flex-direction: column;
		// justify-content: center;
		align-items: center;

		.close {
			width: 50rpx;
			height: 50rpx;
			top: 28rpx;
			right: 28rpx;
		}

		.welfareHeader {
			font-weight: bold;
			font-size: 64rpx;
			color: #182727;
			padding-top: 40rpx;
			box-sizing: border-box;
			text-align: center;
			margin-bottom: 28rpx;
		}

		.viewBoxWelFare {
			// welfare.png
			width: 678rpx;
			height: 666rpx;
			background: url("@/static/purchaseGoods/welfare.png") no-repeat;
			background-size: 100% 100%;
			margin-bottom: 18rpx;
			padding-top: 300rpx;
			display: flex;
			flex-direction: column;
			align-items: center;
			box-sizing: border-box;

			.viewBox1 {
				width: 418rpx;

				background: #FFFFFF;
				border-radius: 8rpx;
				padding: 16rpx 20rpx;
				box-sizing: border-box;
				line-height: 30rpx;
				position: relative;

				.title1 {
					font-weight: 500;
					font-size: 28rpx;
					color: #182727;
					margin-bottom: 8rpx;

				}

				.title2 {
					font-weight: 400;
					font-size: 24rpx;
					color: #929399;
					width: 318rpx;
				}

				.selectRadio {


					.noselectradio {
						width: 40rpx;
						height: 40rpx;

						position: absolute;
						top: 16rpx;
						right: 20rpx;
					}
				}
			}

			.viewBox1:first-child {
				margin-bottom: 28rpx;
			}

		}

		.viewWelFareBtn {
			width: 694rpx;
			height: 88rpx;
			background: var(--tm-themeColor-level1);
			font-weight: 600;
			font-size: 32rpx;
			color: #151822;
			display: flex;
			justify-content: center;
			align-items: center;
			border-radius: 20rpx;
		}
	}
</style>